<template>
    <div class="subDiv" >这是子模块的地盘了<br>
        <h1>组件生命周期</h1>
        <h2>创建、挂载、更新、销毁</h2>
        <img v-for="(item,index) in dogs" :key="index" :src="item.src" alt="">
        <button @click="changeDog">换一只狗</button>

        
    </div>
    
</template>

<script setup lang="ts" name="Person">
    import useDogs from '@/hooks/useDogs'
    const {dogs,changeDog} = useDogs()
    
</script>

<style scoped>
    .subDiv{
        color:blue;
        background-color:rgb(188, 186, 186);
        width: 770px;
        height: 300px;
        font-size: 15px;
        font-weight: 800;
        position:absolute;
        top:100px;
        border-radius: 20px;
        /** text-align: center;  */
        padding-left: 30px;
        padding-top: 30px;
        }
    button{
        width: 100px;
        height: 30px;
        font-size: 15px;
        margin: 10px;
        }
    h1{
        font-size: 20px;
    }
    h2{
        font-size: 18px;
    }
    img{
        height: 150px;
        margin: 10px;
    }
</style>